<template>
  <div class="bind-phone-wrapper">
    <div class="form">
      <div class="around">
        <input pattern="[0-9]*" v-model="phone" :placeholder="$t('placeholder.phone')" ref="phoneCount">
      </div>
      <div class="around validate-code">
        <input pattern="[0-9]*" v-model="validateCode" :placeholder="$t('placeholder.code')" >
        <div class="code" @click="getValidate">
          {{validateName}}
        </div>
      </div>
      <div class="around"  style="margin: 25px auto;" :style="{backgroundColor:backgroundButtonColor}">
        <button class="btn" @click="confirmPhone" :style="{backgroundColor:backgroundButtonColor, color: butttnColor}" :disabled="disabledButton">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import { Divider } from 'vux'
import VHeader from '@/components/v-header/v-header'
import axios from '@/api/axiosApi'
import { isIOS } from '@/assets/js/brower'
import { localUser } from '@/assets/js/local'
import md5 from 'js-md5'
import { mapMutations } from 'vuex'

let countDown = 60
export default {
  data () {
    return {
      clickBack: false,
      title: this.$t('title.bindPhone'),
      phone: '',
      validateCode: '',
      validateName: this.$t('btn.getCode'),
      password: '',
      rePassword: '',
      submitPhone: false,
      disabledButton: true,
      disabledButtonRegister: true,
      backgroundButtonColor: '#D1D4DC',
      backgroundRegistButtonColor: '#D1D4DC',
      butttnColor: '#ffffff'
    }
  },
  components: {
    VHeader, Divider
  },
  destroyed () {
    if (this.timer) {
      clearTimeout(this.timer)
    }
  },
  watch: {
    validateCode: function() {
      if (this.phone !== '' && this.validateCode !== '') {
        this.backgroundButtonColor = '#fff'
        this.butttnColor = '#00ceb9'
        this.disabledButton = false
      } else {
        this.backgroundButtonColor = '#D1D4DC'
        this.butttnColor = '#fff'
        this.disabledButton = true
      }
    },
    phone: function() {
      this.$refs.phoneCount.setAttribute('maxlength', 11)
      if (this.phone !== '' && this.validateCode !== '') {
        this.backgroundButtonColor = '#fff'
        this.butttnColor = '#00ceb9'
        this.disabledButton = false
      } else {
        this.backgroundButtonColor = '#D1D4DC'
        this.butttnColor = '#fff'
        this.disabledButton = true
      }
    },
    password: function() {
      if (this.password !== '' && this.rePassword !== '') {
        this.backgroundRegistButtonColor = '#fff'
        this.butttnColor = '#00ceb9'
        this.disabledButtonRegister = false
      } else {
        this.backgroundRegistButtonColor = '#D1D4DC'
        this.butttnColor = '#fff'
        this.disabledButtonRegister = true
      }
    },
    rePassword: function() {
      if (this.password !== '' && this.rePassword !== '') {
        this.backgroundRegistButtonColor = '#fff'
        this.butttnColor = '#00ceb9'
        this.disabledButtonRegister = false
      } else {
        this.backgroundRegistButtonColor = '#D1D4DC'
        this.butttnColor = '#fff'
        this.disabledButtonRegister = true
      }
    }
  },
  methods: {
    beforeLeave (el) {
      // 苹果手机通过侧滑返回(即不点击返回)，则直接隐藏
      if (isIOS() && !this.clickBack) {
        el.style.display = 'none'
      }
    },
    setTimeDown () {
      if (countDown === 0) {
        this.validateDisabled = false
        this.validateName = this.$t('btn.refreshCode')
        countDown = 60
        return
      } else {
        this.validateDisabled = true
        this.validateName = this.$t('btn.againSendCode', {
          count: countDown
        })
        countDown--
      }
      const _self = this
      this.timer = setTimeout(() => {
        _self.setTimeDown()
      }, 1000)
    },
    getValidate () {
      if (this.validateDisabled) {
        return
      }
      if (!(/^1[34578]\d{9}$/.test(this.phone))) {
        this.$vux.toast.text(this.$t('toast.phoneNotCorrect'), 'middle')
        return
      }
      if (countDown >= 60) {
        const _self = this
        axios.get(_self, `/v1/sms/${this.phone}`, null, (data) => {
          _self.$vux.toast.show(this.$t('toast.sendCodeSuccess'), 'middle')
        })
      }
      this.setTimeDown()
    },
    blurPassword (event) {
      if (!(/^([\d]|[\w]){6,16}$/.test(this.password))) {
        this.$vux.toast.text(this.$t('toast.pswdRule'), 'middle')
        event.target.focus()
      }
    },
    confirmPhone () {
      if (!(/^1[34578]\d{9}$/.test(this.phone))) {
        this.$vux.toast.text(this.$t('toast.phoneNotCorrect'), 'middle')
        return
      }
      if (this.validateCode.length !== 6) {
        this.$vux.toast.text(this.$t('toast.codeNotCorrect'), 'middle')
        return
      }
      alert(JSON.stringify(localUser.get('wpaOpenid')))
      const _self = this
      axios.post(_self, `/v1/sms/${this.phone}/${this.validateCode}`, null, () => {
        axios.post(_self, `/v1/threeWayBindPhone`, {
          wpaOpenid: localUser.get('wpaOpenid')
        }, (data) => {
          localUser.set(data)
          _self.setLoginAnmation('')
          _self.$router.replace('/')
        }, () => {
          _self.submitPhone = true
          _self.title = this.$t('title.submitPswd')
        })
      })
    },
    confirmPassword () {
      if (this.password === '') {
        this.$vux.toast.text(this.$t('toast.pswdNotNull'), 'middle')
        return
      }
      if (!(/^([\d]|[\w]){6,16}$/.test(this.password))) {
        this.$vux.toast.text(this.$t('toast.pswdRule'), 'middle')
        this.$refs.password.focus()
        return
      }
      if (this.password !== this.rePassword) {
        this.$vux.toast.text(this.$t('toast.twoPswdDiffer'), 'middle')
        return
      }
      let params = localUser.get()
      params.password = this.password
      const _self = this
      axios.post(_self, '/v1/threeWayRegister', params, (data) => {
        data.password = md5(_self.password)
        localUser.set(data)
        this.setLoginAnmation('')
        _self.$router.replace('/')
        const JIM = _self.$store.getters.JIM
        JIM.register({
          username: data.id,
          password: _self.password,
          is_md5: true,
          nickname: _self.nickname
        })
      })
    },
    ...mapMutations({
      setLoginAnmation: 'SET_LOGIN_ANMATION'
    })
  }
}
</script>

<style lang="stylus" scoped>
.bind-phone-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #F9FAFC;
  z-index: 101;

  .form {
    margin 45% auto;
    .around {
      border-radius: 23px;
      height: 45px;
      padding: 0 25px;
      width: 62%;
      margin: 0 auto 18px auto;
      box-shadow: 0 0 10px #d5d5d5;
      background: #fff;
      overflow: hidden;
      input {
        border: inherit;
        width: 100%;
        height: 100%;
        overflow: hidden;
        font-weight: 600;
        font-size: 15px;
        &:focus {
          outline: none
        }
      }
      .btn {
        color: #ffffff;
        width: 100%;
        height: 100%;
        border: none;
        font-size: 14px;
        background-color: #b9b9b9;
        &:focus {
          outline: none
        }
      }
    }
    .validate-code {
      display: flex;
      justify-content: space-between;

      input {
        width: 68%;
      }
      .code {
        margin: 10px 0;
        line-height: 25px;
        width: 32%;
        min-width: 100px;
        color: #cccccc;
        text-align: center;
        border-left: 1px solid #cccccc;
        margin-left: -1px;  // 线
        margin-right: -18px;
      }
    }
    p {
      font-size: 13px;
      color: #797878;
      text-align: center;
      a {
        color: #2575f1;
        text-decoration-line: underline;
        text-decoration-color: #2575f1;
      }
    }
  }

  .third-login {
    padding-left: 25%;
    padding-right: 25%;
    margin-top: 32%;
    bottom: 18%;
    -webkit-backface-visibility: hidden;
    color: #797878;
    font-size: 13px;

    .item {
      text-align: center;
      .icon {
        width: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 27px;
        text-align: center;
        color: #cccccc;
        margin: -1px;
        border: 1px solid #cccccc;
        border-radius: 50%;
        overflow: hidden;
        &:hover {
          color: #656565;
          border: 1px solid #656565;
        }
      }
      p {
        margin-top: 5px;
      }
    }
  }
}

.slide-enter-active, .slide-leave-active {
    transition: all .3s
}

.slide-enter, .slide-leave-to {
    transform: translate3d(100%, 0, 0)
}
</style>

